import { ShElement } from './ShElement'
import { ShIcon } from './ShIcon'


const SVG_OK = '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="#060" stroke="#060" stroke-width="3" stroke-linejoin="round"/><path d="M16 24L22 30L34 18" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>'
const SVG_ERROR = '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#600" stroke="#600" stroke-width="3" stroke-linejoin="round"/><path d="M29.6567 18.3432L18.343 29.6569" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3433 18.3432L29.657 29.6569" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>' 


export class ShPopHint extends ShElement {

    constructor(message: string, style: 'ok' | 'error') {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    max-width: 30em;
                    height: 0;
                    box-shadow: 0 0 10px #00000020;
                    top: 50px;
                    overflow: clip;
                    transition: height 300ms;
                }
                #content {
                    padding: 2em 4em;
                    background-color: ${style === 'ok' ? 'rgb(235, 255, 235)' : 'rgb(255, 235, 235)'};
                    color: ${style === 'ok' ? '#02801b' : '#d0021b'};
                    display: flex;
                    align-items: flex-start;
                }
                sh-icon {
                    margin-top: calc(0.25em - 1px);
                }
                #message {
                    flex-grow: 1;
                    margin-left: 1em;
                    line-height: 1.5em;
                    word-wrap: break-word;
                }
            </style>
            <div id="content">
                <div id="message">${message}</div>
            </div>
        `

        this.$shadow.getElementById('content')!.prepend(style === 'ok'
            ? new ShIcon(SVG_OK, { width: '1em', height: '1em' })
            : new ShIcon(SVG_ERROR, { width: '1em', height: '1em' })
        )
    }
}
customElements.define('sh-pop-hint', ShPopHint)


export function popHint(message: string, style: 'ok' | 'error') {
    const $hint = new ShPopHint(message, style)

    document.body.append($hint)
    $hint.style.left = (window.innerWidth - $hint.offsetWidth) / 2 + 'px'
    $hint.style.height = $hint.scrollHeight + 'px'
    window.setTimeout(() => {
        $hint.style.height = '0'
        window.setTimeout(() => $hint.remove(), 300)
    }, 1500)
}
